@use '../../styles/variables';


.menu {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 30px;
  list-style: none;
  border-bottom: variables.$menu-border-width solid variables.$menu-border-color;
  box-shadow: variables.$menu-box-shadow;

  > .menu-item {
    padding: variables.$menu-item-padding-y variables.$menu-item-padding-x;
    cursor: pointer;
    transition: variables.$menu-transition;

    &:hover,
    &:focus {
      text-decoration: none;
    }

    &.is-disabled {
      color: variables.$menu-item-disabled-color;
      cursor: not-allowed;
      pointer-events: none;
    }

    &.is-active,
    &:hover {
      color: variables.$menu-item-active-color;
      border-bottom: variables.$menu-item-active-border-width solid
        variables.$menu-item-active-color;
    }
  }

  .submenu-item {
    position: relative;
    .submenu-title {
      display: flex;
      align-items: center;
      // padding-bottom:  variables.$menu-item-padding-y;

      .arrow-icon {
        margin-left: 3px;
        transition: transform 0.3s ease;
      }
    }
  }

  .submenu-container {
    // display: none;
    list-style: none;
    padding-left: 0;
    white-space: nowrap;
    .menu-item {
      padding: variables.$menu-item-padding-y variables.$menu-item-padding-x;
      cursor: pointer;
      transition: variables.$menu-transition;
      &.is-active,
      &:hover {
        color: variables.$menu-item-active-color !important;
      }
    }
    // &.menu-opened {
    //   // display: block;
    // }
  }
}

.menu-horizontal {
  > .menu-item {
    border-bottom: variables.$menu-item-active-border-width solid transparent;
  }

  .submenu-container {
    position: absolute;
    background: variables.$white;
    z-index: 100;
    top: calc(100% + 8px);
    left: 0;
    margin: 10px;
    border-radius: 4px;
    border: variables.$menu-border-width solid variables.$menu-border-color;
    box-shadow: variables.$submenu-box-shadow;

    > .menu-item {
      padding: 8px 20px;
      border-bottom: variables.$menu-border-width solid variables.$menu-border-color;

      &:hover {
        background-color: #f5f7fa;
      }

      &:last-child {
        border-bottom: none;
      }
    }
  }

  .submenu-item {
    .submenu-title {
      .arrow-icon {
        transform: rotate(0deg);
      }
    }

    &:hover .arrow-icon {
      transform: rotate(180deg);
    }
  }
}

// 垂直
.menu-vertical {
  flex-direction: column;
  border-bottom: 0;
  border-right: variables.$menu-border-width solid variables.$menu-border-color;

  > .menu-item {
    border-left: variables.$menu-item-active-border-width solid transparent;

    &.is-active,
    &:hover {
      border-bottom: 0;
      border-left: variables.$menu-item-active-border-width solid variables.$menu-item-active-color;
    }
  }

  .submenu-container {
    padding: 0;
    overflow: hidden;
    background: variables.$white;

    .menu-item {
      &.is-active,
      &:hover {
        border-left: variables.$menu-item-active-border-width solid
          variables.$menu-item-active-color;
        background-color: #ecf5ff;
      }
    }
  }

  .submenu-item {
    .submenu-title {
      .arrow-icon {
        transform: rotate(0deg);
      }
    }

    &.is-opened .arrow-icon {
      transform: rotate(180deg);
    }
  }
}
